<template>
  <div class="App">
    <h1>我是父组件</h1>
    <Suspense>
       <!-- 正常显示 -->
       <template v-slot:default>
         <Child></Child>
       </template>
       <!-- 网速慢或者加个定时器了就显示加载中 -->
       <template v-slot:fallback>
         <h1>加载中...</h1>
       </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
// import Child from './components/Child'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
export default {
  name:'App',
  components:{
     Child
  },
}
</script>

<style lang="css" scoped>
  .App{
    background-color: gray;
    padding: 10px;
  }
</style>